<template>
    <div class="homepage" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
  
    <!-- 使用echarts（具体是哪种图形，取决于option的内容） -->
      <e-charts class="chart1" :option="option1" />
  
      <div class="chart2">
        <div style="margin: 30px auto; font-size: 40px; font-weight: 600; text-align: center;">
            <span>平台交易信息</span>
        </div>
        <div>
            <el-tag type="primary">订单总收入</el-tag>
            <el-tag type="info">{{ transactionInfo.totalIncome }}</el-tag>
        </div>
        <div>
            <el-tag type="success">平台存款</el-tag>
            <el-tag type="info">{{ transactionInfo.balance }}</el-tag>
        </div>
        <div>
            <el-tag type="warning">商户提现总金额</el-tag>
            <el-tag type="info">{{ transactionInfo.totalWithdrawal }}</el-tag>
        </div>
        </div>
    </div>
  </template>
  
  
  <script setup>

import { getOrderType,getTransaction } from "@/api/bigbase/SC.js"
  
  import {onMounted, ref} from 'vue';
  // 页面加载完成后，调用getOption()方法，获取option
  onMounted(() => {
    getOption1(); 
    getOption2();
  })
  
  // 定义一个变量，用来存储option1
  const option1 = ref('');
  const infoName = ref([]);
  const infoValue = ref([]);
  // 定义一个方法，用来获取option1
  const getOption1 = () => {
    getOrderType(0).then(res => {
        infoName.value = [];
        infoValue.value = [];

       if(res.code == 200){
        for(let i=0; i<res.data.length; i++){
            infoName.value.push(res.data[i].name);
            infoValue.value.push(res.data[i].data);
        }
        console.log(res.data);
        const result = {
            name:infoName.value,
            value:infoValue.value
        }

        const resultMap = result.name.map((name, index) => {
            return {
                name: name,
                value: result.value[index]
            };
        });

        // console.log(result)
         option1.value = {
          title: {
            text: '订单类型分布',
            subtext: '订单统计',
            left: 'center'
          },
            tooltip: {
              trigger: 'item'
                },
          legend: {
          orient: 'vertical',
          left: 'left'
        },
            series: [
          {
                name: '订单类型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
            label: {
              show: true,
              position: 'center'
            },
          labelMap: {
            '1': '洗车',
            '2': '保养',
            '3': '维修'
          },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
             },
                labelLine: {
                  show: false
                },
                data: resultMap
              }
            ]
      };
       }
     }) 
    }
    const transactionInfo = ref('')
    const getOption2 = () => {
        getTransaction(0).then(res => {
            if(res.code==200){
                transactionInfo.value = res.data       
            }
            //console.log(res.data)
        })
    }

  
  </script>
  <style scoped>
  /* 我们必须给一个高度/宽度，不然echarts图表无法显示出来 */

  .chart1 {
    height: 650px;
    width: 50%;
    background-color: wheat;
  }
  .chart2 {
    height: 650px;
    width: 50%;
    background-color: wheat;
  }
  .chart2 > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-tag{
    font-size: 25px;
    padding: 20px;
    margin: 5px 5px 15px 5px;
  }
  </style>